<template>
    <view class="container">
        <view class="common-header-xian"></view>
        <!-- 表单 -->
        <form @submit="saveData" :report-submit="true">
            <view class="address-cont-title b-f b-b">
                <view class="list address-box dis-flex b-b">
                    <view class="left-name">
                        <text class="f-30">收货人</text>
                    </view>
                    <view class="right-cont flex-box">
                        <input name="name" placeholder="请输入收货人姓名" :value="detail.name" />
                    </view>
                </view>
                <view class="list address-box dis-flex">
                    <view class="left-name">
                        <text class="f-30">手机号</text>
                    </view>
                    <view class="right-cont flex-box">
                        <input maxlength="11" name="phone" placeholder="请输入收货人联系电话" type="number" :value="detail.phone" />
                    </view>
                </view>
            </view>
            <view class="address-cont-title b-f b-b">
                <view class="dis-flex list address-box m-top20 b-b">
                    <view class="left-name">
                        <text class="f-30">所在地区</text>
                    </view>
                    <view class="address-cont-box flex-box">
                        <region-picker @change="bindRegionChange" :value="region">
                            <text v-if="region.length" class="f-30">{{ region[0] }}-{{ region[1] }}-{{ region[2] }}</text>

                            <text v-else class="f-30 col-7">选择省、市、区</text>
                        </region-picker>
                    </view>
                </view>
                <view class="dis-flex list address-box">
                    <view class="left-name">
                        <text class="f-30">详细地址</text>
                    </view>
                    <view class="right-cont flex-box">
                        <input name="detail" placeholder="请输入街道小区楼层" type="text" :value="detail.detail" />
                    </view>
                </view>
            </view>
            <!-- <view class="padding-box m-top35 btn-green btn-sm">
                <button class="f-32" @tap.stop.prevent="chooseAddress">一键获取微信地址</button>
            </view> -->
            <view class="padding-box m-top20 profile-btn">
                <button formType="submit" :disabled="disabled">保存</button>
            </view>
        </form>

        <!-- 快捷导航 -->
        <view :class="'filter-menu ' + (nav_select ? 'active' : '')">
            <view class="filter-menu-list ts-5">
                <custom-ul>
                    <custom-li @tap.native="nav($event, { index: 'home' })" data-index="home">
                        <text class="iconfont icon-home"></text>
                    </custom-li>
                    <custom-li @tap.native="nav($event, { index: 'fenlei' })" data-index="fenlei">
                        <text class="iconfont icon-fenlei"></text>
                    </custom-li>
                    <custom-li @tap.native="nav($event, { index: 'cart' })" data-index="cart">
                        <text class="iconfont icon-cart"></text>
                    </custom-li>
                    <custom-li @tap.native="nav($event, { index: 'profile' })" data-index="profile">
                        <text class="iconfont icon-profile"></text>
                    </custom-li>
                    <custom-li class="w"></custom-li>
                </custom-ul>
            </view>
            <view @tap="commonNav" class="filter-menu-title"></view>
        </view>
    </view>
</template>

<script>
let app = getApp();
export default {
    data() {
        return {
            disabled: false,
            nav_select: false,
            // 快捷导航
            region: '',
            detail: {
                name: '',
                phone: '',
                detail: ''
            },
            error: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 获取当前地址信息
        this.getAddressDetail(options.address_id);
    },
    methods: {
        /**
         * 获取当前地址信息
         */
        getAddressDetail: function (address_id) {
            let that = this;
            app.globalData._get(
                'address/detail',
                {
                    address_id
                },
                function (result) {
                    that.setData(result.data);
                }
            );
        },

        /**
         * 表单提交
         */
        saveData: function (e) {
            let that = this;
            let values = e.detail.value;
            values.region = this.region;

            // 记录formId
            app.globalData.saveFormId(e.detail.formId);

            // 表单验证
            if (!that.validation(values)) {
                app.globalData.showError(that.error);
                return false;
            }

            // 按钮禁用
            that.setData({
                disabled: true
            });

            // 提交到后端
            values.address_id = that.detail.address_id;
            app.globalData._post_form(
                'address/edit',
                values,
                function (result) {
                    app.globalData.showSuccess(result.msg, function () {
                        uni.navigateBack();
                    });
                },
                false,
                function () {
                    // 解除禁用
                    that.setData({
                        disabled: false
                    });
                }
            );
        },

        /**
         * 表单验证
         */
        validation: function (values) {
            if (values.name === '') {
                this.error = '收件人不能为空';
                return false;
            }
            if (values.phone.length < 1) {
                this.error = '手机号不能为空';
                return false;
            }
            if (values.phone.length !== 11) {
                this.error = '手机号长度有误';
                return false;
            }
            let reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
            if (!reg.test(values.phone)) {
                this.error = '手机号不符合要求';
                return false;
            }
            if (!this.region) {
                this.error = '省市区不能空';
                return false;
            }
            if (values.detail === '') {
                this.error = '详细地址不能为空';
                return false;
            }
            return true;
        },

        /**
         * 修改地区
         */
        bindRegionChange: function (e) {
            this.setData({
                region: e.detail.value
            });
        },

        /**
         * 获取微信地址
         */
        chooseAddress: function () {
            let that = this;
            uni.chooseAddress({
                success: function (res) {
                    that.setData({
                        'detail.name': res.userName,
                        'detail.phone': res.telNumber,
                        'detail.detail': res.detailInfo,
                        region: [res.provinceName, res.cityName, res.countyName]
                    });
                }
            });
        },

        /**
         * 快捷导航 显示/隐藏
         */
        commonNav: function () {
            this.setData({
                nav_select: !this.nav_select
            });
        },

        /**
         * 快捷导航跳转
         */
        nav: function (e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let url = '';
            switch (e.currentTarget.dataset.index) {
                case 'home':
                    url = '../index/index';
                    break;
                case 'fenlei':
                    url = '../category/index';
                    break;
                case 'cart':
                    url = '../flow/index';
                    break;
                case 'profile':
                    url = '../user/index';
                    break;
            }
            uni.switchTab({
                url
            });
        }
    }
};
</script>
<style>
@import './detail.css';
</style>
